<template>
  <ToolbarButton
    type="popover"
    icon="i-ri-arrow-down-s-line"
    popover-placement="bottom-end"
    popover-trigger="click"
  >
    <template #popover>
      <div class="mode-switcher-popover">
        <div
          v-for="option in modeOptions"
          :key="option.value"
          class="mode-switcher-item"
          :class="{ active: currentMode === option.value }"
          @click="() => handleModeChange(option.value)"
        >
          <span class="mode-switcher-icon-wrapper">
            <i
              :style="{ opacity: currentMode === option.value ? 1 : 0 }"
              class="i-ri-check-line mode-switcher-check"
            ></i>
            <i
              v-if="option.value === 'simple'"
              class="i-ri-menu-line mode-switcher-icon"
            ></i>
            <i
              v-else="option.value === 'ribbon'"
              class="i-ri-layout-grid-line mode-switcher-icon"
            ></i>
          </span>
          <span class="mode-switcher-label">{{ option.label }}</span>
        </div>
      </div>
    </template>
  </ToolbarButton>
</template>

<script setup lang="ts">
import ToolbarButton from "../../../button/index.vue";
import type { SelectOption } from "../../../button/src/select/types";

defineOptions({
  name: "ModeSwitcher",
});

const props = defineProps<{
  currentMode: "simple" | "ribbon";
}>();

const emit = defineEmits<{
  (e: "mode-change", mode: "simple" | "ribbon"): void;
}>();

// 模式选项（硬编码）
const modeOptions: SelectOption[] = [
  { label: "简约工具栏", value: "simple", icon: "i-ri-menu-line" },
  { label: "专业工具栏", value: "ribbon", icon: "i-ri-layout-grid-line" },
];

// 当前模式
const currentMode = props.currentMode;

// 处理模式切换
const handleModeChange = (mode: string) => {
  emit("mode-change", mode as "simple" | "ribbon");
};
</script>

<style scoped>
.mode-switcher-popover {
  min-width: 140px;
}

.mode-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0px;
  cursor: pointer;
  border-radius: var(--editor-radius);
  transition: all 0.2s ease;
  color: var(--editor-text-color);
}

.mode-switcher-item:hover {
  color: var(--editor-primary-color);
}

.mode-switcher-item.active {
  color: var(--editor-primary-color);
}

.mode-switcher-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

.mode-switcher-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--editor-text-color);
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  text-align: center;
}

.mode-switcher-item:hover .mode-switcher-icon {
  color: var(--editor-primary-color);
}

.mode-switcher-item.active .mode-switcher-icon {
  color: var(--editor-primary-color);
}

.mode-switcher-check {
  color: var(--editor-primary-color);
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
}

.mode-switcher-label {
  font-size: 14px;
  flex: 1;
}
</style>
